<template>
  <div class="goodsinfo">
    <div>
      <van-swipe :autoplay="3000">
        <van-swipe-item
          class="my-swipe"
          v-for="(image, index) in images"
          :key="index"
          :loop="false"
        >
          <img v-lazy="image" />
        </van-swipe-item>
      </van-swipe>
      <div class="price_goods">
        <div class="price" id="specPrice" style="color: rgb(255, 255, 255)">
          <div class="firePrice">活动优享价</div>
          ¥<em>{{ goodsinfo.goods_price }}</em>
          <div class="product">产品剩余数量:{{ goodsinfo.goods_number }}</div>
        </div>
      </div>
      <van-panel>
        <template #footer>
          <p class="title">{{ goodsinfo.goods_name }}</p>
          <!-- <p class="price">
            <span class="new">现价:￥{{ goodsinfo.goods_price }}</span>
          </p> -->
          <p class="number">
            <span class="number_span">购买数量:</span>
            <van-stepper v-model="value" integer />
          </p>
        </template>
      </van-panel>
      <van-panel>
        <template #footer>
          <p class="title_goods">商品信息</p>
          <!-- <p></p> -->
          <p class="number">
            <span>库存情况: {{ goodsinfo.goods_number }}件</span>
          </p>
          <p class="time">
            <span>上架时间: {{ goodsinfo.add_time | datefmt }}</span>
          </p>
        </template>
      </van-panel>
    </div>
    <van-goods-action class="buyCart">
      <van-goods-action-icon icon="chat-o" text="客服" />
      <van-goods-action-icon icon="shop-o" text="店铺" />
      <van-goods-action-button
        color="#be99ff"
        type="warning"
        text="加入购物车"
        @click="addCart"
      />
      <van-goods-action-button color="#7232dd" type="danger" text="立即购买" />
    </van-goods-action>
    <van-divider class="title_goods">商品详情</van-divider>
    <div v-html="goods"></div>
  </div>
</template>
<script>
import { getGoodsDetail } from '../../api/goods'
export default {
  // 将父组件的id传入使用
  props: ['id'],
  data() {
    return {
      goodsinfo: {},
      value: 1,
      goods: '',
      images: []
    }
  },
  methods: {
    async getGoodsDetail() {
      // 通过传入的id获取到具体的商品详情信息
      const res = await getGoodsDetail(this.id)
      this.goodsinfo = res.data.message
      this.goods = res.data.message.goods_introduce
      // 判断如果没有中型图片就使用备用图片
      if (res.data.message.pics.length === 0) {
        res.data.message.pics.push({
          pics_mid: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F013e3258ddb8c1a801219c77499b95.jpg%401280w_1l_2o_100sh.jpg&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1638434283&t=4d02c4ab3958765ce49acb50c9bf580d'
        })
      }
      res.data.message.pics.forEach(item => {
        this.images.push(item.pics_mid)
      })
      // 遍历对象
      // for (const key in this.goodsinfo) {
      //   if (this.goodsinfo[key] === '') {
      //     this.goodsinfo[key] = 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F013e3258ddb8c1a801219c77499b95.jpg%401280w_1l_2o_100sh.jpg&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1638434283&t=4d02c4ab3958765ce49acb50c9bf580d'
      //   }
      // }
    },
    // 添加购物车 将商品信息写成对象传入vuex
    addCart() {
      const goodsInfo = {
        id: this.id,
        src: this.images[0],
        title: this.goodsinfo.goods_name,
        price: this.goodsinfo.goods_price,
        count: this.value,
        isShow: true
      }
      this.$store.dispatch('goods/addCart', goodsInfo)
    }
  },
  created() {
    this.getGoodsDetail()
  }
}
</script>
<style lang="scss" scoped>
.goodsinfo {
  .my-swipe {
    text-align: center;
    height: 250px;
    img {
      height: 100%;
    }
  }
  .goods-img {
    width: 100%;
  }
  .price_goods {
    background: url("https://img10.360buyimg.com/ling/jfs/t1/206907/31/6023/239476/616ea59fEa7f4798e/995f70d9cae1c4d8.png");
    height: 64px;
    padding: 10px;
    box-sizing: border-box;
    .price {
      position: relative;
      font-size: 18px;
      .firePrice {
        margin-bottom: 10px;
        font-size: 14px;
        color: red;
      }
      em {
        font-size: 24px;
      }
      .product {
        position: absolute;
        bottom: 0;
        right: 0;
        font-size: 12px;
        margin-bottom: 20px;
      }
    }
  }
  .buyCart {
    position: fixed;
    bottom: 0;
    left: 0;
  }
  .title {
    font-size: 18px;
    font-weight: 600;
  }
  .title_goods {
    font-size: 18px;
    font-weight: 600;
  }
  [class*="van-hairline"]::after {
    border: none;
  }
  .number {
    display: flex;
    align-items: center;
    .number_span {
      margin-right: 15px;
    }
  }
}
</style>